<template>
  <div id="shoporderlist" style="position: relative;">
          <el-table id="mytable" :data="datalist" style="width: 100%" :height="dtheight" :header-cell-style="{background:'#4F81BC',color:'white'}"
           :row-class-name="tableRowClassName"  :border="true">
                
                <el-table-column label="订单时间"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ getymdhms(scope.row.time * 1000) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="账号"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.buyer.nickname }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="账号姓名"  align='center'  >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.buyer.telphone }}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="订单编号"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.orderno }}</span>
                    </template>
                </el-table-column> 
                 <el-table-column label="订单状态"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span v-if="scope.row.state == 2">已付款,待发货 </span>
                        <span v-if="scope.row.state == 3">已发货</span>
                        <span v-if="scope.row.state == 4">已收货</span>
                    </template>
                </el-table-column> 
        

                 <el-table-column label="操作" align='center' width="250px" fixed="right">
                    <template slot-scope="scope">
                        <span >  
                            <el-button size="mini"  type="primary" v-if="scope.row.state == 2"  plain  class="button_class1" @click="add_but(scope.row)">发货</el-button>
                            <el-button size="mini"  type="primary" v-if="scope.row.state != 2" plain  class="button_class2" @click="add_but(scope.row)">发货详情</el-button>
                        </span>
                       

                    </template>
                </el-table-column>
  
            </el-table> 


              <!-- 发货 -->
    <el-dialog title="发货" :visible.sync="add_fh"  width="600px">
        <div style="width:100%;"> 

            <div class="title_box" style="margin-top:-30px;">
                <div class="dian"></div>
                <div class="title_name">收货信息</div>
            </div>
            <div class="box_top">
                    <div class="box_top_con">
                        <div class="box_top_name" style="display:flex;">
                            <div class="title_span1">收 货 人:</div>
                            <div class="title_span2">
                                <span v-if="select_row.receive">{{ select_row.receive.truename }}</span>
                                <span v-else>-</span>
                            </div>
                        </div>
                        <div class="box_top_name" style="display:flex;">
                            <div class="title_span1">手 机 号:</div>
                            <div class="title_span2">
                                <span v-if="select_row.receive">{{ select_row.receive.tel }}</span>
                                <span v-else>-</span>
                            </div>
                        </div>
                        <div class="box_top_name" style="display:flex;">
                            <div class="title_span1">收货地址:</div>
                            <div class="title_span2">
                                <span v-if="select_row.receive">{{ select_row.receive.address }}</span>
                                <span v-else>-</span>
                            </div>
                        </div>
                    </div>
            </div>
            <div class="title_box" style="margin-top:20px;">
                <div class="dian"></div>
                <div class="title_name">商品信息</div>
            </div>

            <el-table :data="shop_data" style="width: 100%;height:250px;margin-top:10px;"  :header-cell-style="{background:'#4F81BC',color:'white'}"
           :row-class-name="tableRowClassName"  :border="true">

              
                <el-table-column label="商品名称"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.pname }}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="规格"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.specs_ename }}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="价格"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.price }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="数量"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.count }}</span>
                    </template>
                </el-table-column>
  
            </el-table>

            <div class="title_box" style="margin-top:20px;">
                <div class="dian"></div>
                <div class="title_name">物流信息</div>
            </div>
           

           <div >

                    <div class="box_top_con" style="margin-bottom:20px;" v-if="select_row.state != 2">
                            <div class="box_top_name" style="display:flex;">
                                <div class="title_span1">快递公司:</div>
                                <div class="title_span2">
                                      <span v-if="select_row.express">{{ select_row.express.name }}</span>
                                      <span v-else>-</span>
                                </div>
                            </div>
                            <div class="box_top_name" style="display:flex;">
                                <div class="title_span1">快递单号:</div>
                                <div class="title_span2">
                                      <span v-if="select_row.express">{{ select_row.express.number }}</span>
                                      <span v-else>-</span>
                                </div>
                            </div>
                    </div>
               
                    <div style="margin-top:20px;" v-if="select_row.state == 2">
                        <el-form ref="form"   label-width="80px" style="width:100%;">
                            <el-form-item label="快递公司">
                                <el-input v-model="fh_form.express_company" placeholder="快递公司"  style="width:200px;"></el-input>
                            </el-form-item>    
                            <el-form-item label="快递单号">
                                <el-input v-model="fh_form.express_number" placeholder="快递单号"  style="width:200px;"></el-input>
                            </el-form-item>                                  
                        </el-form>

                        <div style="text-align: center;width:50%;margin:auto;margin-top:10px;">
                            <el-button type="primary" class="custom_color_button" style="width:80%;" @click="fh_but_qr">确认</el-button>
                        </div>       
                    </div>

           </div>
        
           
        </div> 
    </el-dialog>



   </div>
</template>

<script>

export default {
   name: 'shoporderlist',
   props:{
      datalist:{  
        //type:Array,
       default:()=>[]
     },
  },
  data () {
    return {
        dtheight:'500',  //窗口高度
        shop_data:[],
        select_row:'',
        add_fh:false,
        fh_form:{
            express_company:'',
            express_number:'',
            orderno:''
        }
    }
  },
   components:{

  },
  created(){
     this.dtheight = window.innerHeight - 353
      
  },
  mounted (){
    
  },
  methods: {
    add_but(row){
       this.shop_data = row.details
       this.select_row = row
       this.fh_form.orderno = row.orderno
       this.fh_form.express_company = ''
       this.fh_form.express_number = ''
       this.add_fh = true
    },
    fh_but_qr(){
        this.post("/product_order/deliver", {
                    orderno:this.fh_form.orderno,
                    express_company:this.fh_form.express_company,
                    express_number:this.fh_form.express_number,
                }).then(res => {

                    if(res.error_code == 0){
                    this.open1(res.result,'success')  //提示框
                    this.add_fh = false
                    this.$emit('up_list_fun')
                    }else {
                    this.open1(res.message,'warning')
                }

        })
    }

  }
}
</script>


<style scoped>
   .title_box{
        display: flex;
        align-items: center;
        margin-top: 8px;
    }
    .dian{
        width: 8px;
        height: 8px;
        background: #F1C94A;
        border-radius:50%;
        margin-right: 8px;
    }
    .title_name{
        font-size: 14px;;
        font-weight: 400;
        color: #000000;
    }
    .box_top{
       display: flex;
       margin-top:10px;
    }
    .box_top_con{
        margin-left:10px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .box_top_name{
        margin-top:10px;
    }
    .title_span1{
        width: 85px;
        text-align-last: justify;
        color:#5E6C84;
        font-size:16px;
    }
    .title_span2{
        color:#888888;
        padding-left: 10px;
        padding-top:2px;
    }
</style>